<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Xshopping-login</title>
    <script src="/libs/jquery/jquery-3.4.1.min.js"></script>
    <script src="/libs/utils/utils.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    body{
        background-image: linear-gradient(to right,#9c88ff,#4cd137,#fbc531,#487eb0,#f5f6fa,#7f8fa6,#273c75,#353b48);
    }
    .login {
        position: relative;
        margin: 40px auto;
        padding: 20px;
        width: 600px;
        height: 400px;
        background-color: lightseagreen;
    }

    .login fieldset {
        padding: 12px;
        margin: 0 40px;
    }

    .login p {
        margin: 20px;
        overflow: hidden;
        position: relative;
    }

    .login input {
        height: 25px;
        width: 165px;
        border: 2px solid #ccc;
        line-height: 25px;
        outline: none;
        transition: 1s;
        position: absolute;
        top: 0;
    }

    .login input:focus {
        border-color: turquoise;
        border-radius: 3px;
    }
    .login input:focus + span {
        left: 62px;
    }
    .login label {
        overflow: hidden;
        display: block;
        height: 29px;
        width: 229px;
        margin: 0 auto;
        font-size: 20px;
        line-height: 29px;
        text-align: left;
        position: relative;
    }

    .close {
        color: azure;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 30px;
        position: absolute;
        right: 5px;
        top: 5px;
    }

    .manycolor {
        width: 165px;
        height: 2px;
        position: absolute;
        transition: 0.5s;
        bottom: 0px;
        left: 229px;
        background-image: linear-gradient(to right,#ff9ff3, #f368e0, #feca57, #ff6b6b, #48dbfb, #5f27cd, #c8d6e5);
    }

    .login button {
        font-size: 16px;
        padding: 0 6px;
        lighting-color: 30px;
        margin-left: 10px;
        text-align: center;
        height: 30px;
        outline: none;
        border: 1px solid #576574;
        border-radius: 5px;
    }

    .login button:hover {
        background-color: #008c8c;
    }

    .login div {
        text-align: center;
    }

    .login div p {
        text-align: center;
        height: 15px;
        font-size: 12px;
        line-height: 15px;
        vertical-align: middle;
    }

    .login div p input {
        display: inline-block;
        width: 15px;
        height: 15px;
        vertical-align: middle;
    }
</style>

<body>
    <div class="login">
        <fieldset>
            <legend>登录</legend>
            <p><label>帐号：<input type="text" id="username" placeholder="请输入您的帐号" name="username" method='post'>
                    <span class="manycolor"></span>
                </label>
            </p>
            <p><label>密码：<input type="password" id="pwd" placeholder="请输入您的密码" name='pwd' method='post'>
                    <span class="manycolor"></span>
                </label></p>
            <div>
                <button class="foundPsd">找回密码</button>
                <button class="register">注册</button>
                <button class="submit">登录</button>
                <p> <input type="checkbox" id="btn7"><span>七天免登陆</span> </p>
            </div>
        </fieldset>
        <div class="close">X</div>
    </div>
    <script>



        // 使用jquery写法
        const $submit = $('.submit')
        const $loginName = $('#username')
        const $loginPwd = $('#pwd')
        const $btn7 = $('#btn7')
        //判断复选框状态  此处不行  由于  提交后是异步处理   因此 先读取的状态后面使用不会生效   因此应当在做判断的时候读取
        // const isCheck = $btn7.prop('checked')
        //点击提交登录
        $submit.on('click', () => {
            const username = $loginName[0].value
            const pwd = $loginPwd[0].value
            $.ajax({
                url: '../api/users/login.php',
                data: {
                    username: username,
                    pwd: pwd
                },
                type: 'post',
                dataType: 'json',
                success: function (response) {
                    if (response.code === 200) {
                        const isCheck = $btn7.prop('checked')

                        const objCookie = {
                            path: '/'
                        }
                        if (isCheck) {
                            objCookie.expires = 7
                        }
                        utils.setCookie('loginState', 'on', objCookie)
                        utils.setCookie('username', username, objCookie)
                        alert('登录成功，跳转到首页')
                        window.location.href = '../index.html'
                    } else if (response.code === 400) {
                        alert(response.body.msg)
                    } else {
                        alert('网络延迟，请稍后再试')
                    }
                }
            })
        })

        //     //纯原生JS写法
        //     const submit = document.querySelector('.submit')
        // const loginName = document.getElementById('username')
        // const loginPwd = document.getElementById('pwd')
        // submit.onclick = () => {
        //     let username = loginName.value
        //     let pwd = loginPwd.value
            // let xhr = new XMLHttpRequest()
            // xhr.open("post", '../api/users/login.php')
            // xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            // xhr.send(`username=${username}&pwd=${pwd}`)
            // xhr.onreadystatechange = () => {
            //     if (xhr.readyState === 4) {
            //         if (xhr.status == 200) {
            //             let msg = JSON.parse(xhr.responseText)
            //             console.log(msg)
            //             if (msg.code === 200) {
            //                 let obj = { path: '/' }
            //                 //七天与否
            //                 if (false) {
            //                     obj.expires = '7'
            //                 }
            //                 utils.setCookie('loginState', 'on', obj)
            //                 utils.setCookie('username', username, obj)
            //                 alert('登录成功')
            //                 window.location.href = '../index.html'
            //             } else if (msg.code === 400) {
            //                 alert('帐号或密码错误')
            //             }else{
            //                 alert('网络错误，请稍后再次尝试')
            //             }
            //         }
            //     }
            // }
        // }
    </script>
</body>

</html>